<template>
  <Panel tite="商品分类">
    <el-button slot="btn" type="primary" @click="clickBtn">添加分类</el-button>

    <el-table :data="list">
      <el-table-column label="序号" prop="id"> </el-table-column>
      <el-table-column label="分类名">
        <template slot-scope="scope">
          <span v-if="scope.row.isEdit === false">{{
            scope.row.cateName
          }}</span>
          <el-input v-model="scope.row.cateName" v-else></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否禁用" prop="state">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            :active-value="1"
            :inactive-value="0"
            :disabled="!scope.row.isEdit"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.isEdit === false"
            type="primary"
            @click="Btn(scope.row)"
            >编辑</el-button
          >
          <el-button v-else type="success" @click="complete(scope.row)"
            >完成</el-button
          >
          <el-button type="danger" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="changeSize"
      @current-change="pageChange"
      :current-page="goodinfo.currentPage"
      :page-sizes="[3, 8, 14, 20]"
      :page-size="goodinfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

 
  </Panel>
</template>

<script>
import {
  GoodCatelistReq,
  GoodsEditcateReq,
  GoodsDelcate,
} from "@/api/goods.api";


export default {

  data() {
    return {
   
      goodinfo: {
        currentPage: 1,
        pageSize: 5,
      },

      list: [],
      total: 0,

       // 当前点击的那一项商品
      curGoods: {},
    };
  },
  methods: {
       // // 子组件校验通过，form为表单数据，传给后端的

    clickBtn(){
     this.dialogFormVisible  = true
    },
    // 编辑
    Btn(row) {
      row.isEdit = true;
    },

    // 点击完成返回初始状态
    complete(row) {
      // console.log(row);
      // 编辑分类接口
      GoodsEditcateReq(row).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          this.$message.success("修改商品成功");
        }
      });
      row.isEdit = false;
    },

    // 删除事件

    remove(row) {
      // 提示用户是否删除
      this.$confirm("确定要删除这个分类吗?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "不删除",
        type: "warning",
      }).then(() => {
        // console.log("点击了删除~~~~~");
        GoodsDelcate(row.id).then((res) => {
          this.$message.success("删除成功");
          this.GoodList();
        });
      });
    },

    async GoodList() {
      const res = await GoodCatelistReq(this.goodinfo);
      // console.log(res);

      res.data.data.forEach((item) => {
        item.isEdit = false;
      });

      this.list = res.data.data;
      // console.log(this.list);
    },

    pageChange(currentPage) {
      // 改变页码
      this.goodinfo.currentPage = currentPage;
      // 重新调用getData
      this.GoodList();
    },

    //每页条数发生改变
    changeSize(size) {
      console.log(size);
      // console.log(this.pageinfo.pageSize);
      this.goodinfo.pageSize = size;
      // console.log(this.pageinfo.pageSize );
      this.GoodList();
    },
  },

  created() {
    this.GoodList();
  },
};
</script>

<style lang="less" scoped>
</style>